
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="content-type" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
    <title>通知管理</title>

    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/font-awesome.css">
    <link href="../css/quill.snow.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/element/index.css">

    <style>
        [v-cloak] {
            display: none;
        }
        .ql-snow .ql-editor img {
            width: 400px;
        }
    </style>
</head>

<body>
<div id="wrapper" v-cloak>
    <!--导航栏-->
    <div class="menuW" style="float: left">
        <div class="sideMenu">
            <div class="head">汽车租赁系统</div>
            <ul>
                <li class="nLi">
                    <h3><i class="fa fa-dashboard"></i>首页<span class="fa fa-angle-up arrow"></span></h3>
                    <ul class="sub">
                        <li><a href="index.html"><i class="fa fa-dashboard"></i>首页</a></li>
                    </ul>
                </li>
                <li class="nLi on">
                    <h3><i class="fa fa fa-dashboard icon"></i>信息展示<span class="fa fa-angle-up arrow"></span>
                    </h3>
                    <ul class="sub">
						<li v-if="authority.indexOf(1) != -1">
							<a href="adminInfo.html"><i class="fa fa-table"></i>超级管理员信息</a>
						</li>
						<li v-if="authority.indexOf(2) != -1">
							<a href="businessInfo.html"><i class="fa fa-table"></i>店员信息</a>
						</li>
						<li v-if="authority.indexOf(3) != -1">
							<a href="userInfo.html"><i class="fa fa-table"></i>顾客信息</a>
						</li>
						<li v-if="authority.indexOf(5) != -1">
							<a href="messageInfo.html"><i class="fa fa-table"></i>留言板</a>
						</li>
						<li v-if="authority.indexOf(6) != -1">
							<a href="checkInfo.html"><i class="fa fa-table"></i>人员检测信息</a>
						</li>
						<li v-if="authority.indexOf(9) != -1">
							<a href="submitInfo.html"><i class="fa fa-table"></i>事故检查</a>
						</li>
						<li v-if="authority.indexOf(10) != -1">
							<a href="richtextInfo.html"><i class="fa fa-table"></i>政策信息宣传</a>
						</li>
						<li v-if="authority.indexOf(1000001) != -1">
							<a href="advertiserInfo.html" class="active"><i class="fa fa-table"></i>通知管理</a>
						</li>
						<li v-if="authority.indexOf(1000009) != -1">
							<a href="typeInfo.html"><i class="fa fa-table"></i>汽车类型</a>
						</li>
						<li v-if="authority.indexOf(1000010) != -1">
							<a href="goodsInfo.html"><i class="fa fa-table"></i>汽车详情管理</a>
						</li>
						<li v-if="authority.indexOf(1000011) != -1">
							<a href="cartInfo.html"><i class="fa fa-table"></i>预约单信息</a>
						</li>
						<li v-if="authority.indexOf(1000012) != -1">
							<a href="orderInfo.html"><i class="fa fa-table"></i>订单信息</a>
						</li>
						<li v-if="authority.indexOf(1000013) != -1">
							<a href="commentInfo.html"><i class="fa fa-table"></i>评价信息</a>
						</li>

                        <li>
                            <a href="javascript:void(0)" @click="personalPage"><i class="fa fa-user"></i>个人信息</a>
                        </li>
                    </ul>
                </li>
				<li class="nLi">
					<h3><i class="fa fa-table"></i>政策信息宣传<span class="fa fa-angle-up arrow"></span></h3>
					<ul class="sub">
						<li>
							<a href="richtextInfoComment.html"><i class="fa fa-unlock-alt"></i>政策信息宣传评论</a>
						</li>
					</ul>
				</li>

                <li class="nLi">
                    <h3><i class="fa fa-unlock-alt"></i>修改密码<span class="fa fa-angle-up arrow"></span></h3>
                    <ul class="sub">
                        <li>
                            <a href="updatePassword.html"><i class="fa fa-unlock-alt"></i>修改密码</a>
                        </li>
                    </ul>
                </li>
                <li class="nLi">
                    <h3><i class="fa fa-power-off"></i>退出登录<span class="fa fa-angle-up arrow"></span></h3>
                    <ul class="sub">
                        <li>
                            <a href="javascript:void(0)" @click="logout"><i class="fa fa-power-off"></i>退出登录</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!-- 主体 -->
    <div class="main">
        <!-- 头部开始 -->
        <div class="main-head" style="width: 100%; display: flex">
            <div style="flex: 1; text-align: left">
                <a href="/front/index.html">返回前台首页</a>
            </div>
            <div style="flex: 1; text-align: right">
                <a href="javascript:void(0)" @click="personalPage"><span>您好，<span style="color: #8470FF">{{user.name}}</span></span></a>
                <a href="javascript:void(0)" @click="logout" style="padding:0 10px;">退出登录</a>
            </div>
        </div>
        <!-- 头部结束 -->

        <!-- 主体开始 -->
        <div style="padding: 0 20px">
            <div>
                <div class="table-title">通知管理</div>
            </div>

            <!-- 表格主体-->
            <div style="margin-top: 10px">
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">通知管理</div>
                            <div class="panel-body">
                                <div class="table-responsive">
                                    <div class="nx-table-header">
                                        <button class="btn btn-sm btn-primary" @click="add()">新增</button>
                                        <input type="text" placeholder="请输入搜索内容" v-model="name" @keyup.enter="loadTable(1)">
                                        <i class="glyphicon glyphicon-search" style="margin-left: -20px"></i>
                                    </div>
                                    <table class="table table-striped table-bordered table-hover" style="margin-top: 10px">
                                        <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>通知标题</th>
                                            <th>通知时间</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="(data,index) in tableData" :key="data.id">
                                            <td>{{data.id}}</td>
                                            <td>{{data.name}}</td>
                                            <td>{{data.time}}</td>
                                            <td>
                                                <button class="btn btn-success btn-xs" @click="edit(data)">编辑</button>
                                                <button class="btn btn-danger btn-xs" @click="del(data.id)">删除</button>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <nav aria-label="Page navigation example">
                                        <ul class="pagination">
                                            <li class="page-item" v-bind:class="{ disabled: preActive }">
                                                <a class="page-link" href="javascript:void(0)"
                                                   v-on:click="loadTable(pageInfo.pageNum - 1)">上一页</a>
                                            </li>
                                            <li class="page-item">
                                                <a class="page-link" href="javascript:void(0)" v-if="pageInfo.pageNum > 1" v-on:click="loadTable(pageInfo.pageNum - 1)">{{pageInfo.pageNum - 1}}</a>
                                            </li>
                                            <li class="page-item disabled">
                                                <a class="page-link" aria-disabled="true" href="javascript:void(0)">{{pageInfo.pageNum}}</a>
                                            </li>
                                            <li class="page-item">
                                                <a class="page-link" href="javascript:void(0)" v-if="pageInfo.hasNextPage" v-on:click="loadTable(pageInfo.pageNum + 1)">{{pageInfo.pageNum + 1}}</a>
                                            </li>
                                            <li class="page-item" v-bind:class="{ disabled: nextActive }">
                                                <a class="page-link" href="javascript:void(0)" v-on:click="loadTable(pageInfo.hasNextPage? (pageInfo.pageNum + 1) : pageInfo.pageNum)">下一页</a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 表格主体结束-->
        </div>
        <!-- 主体结束 -->
    </div>
</div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" id="closeBtn" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                通知管理
            </div>
            <div class="modal-body">
                <input type="text" id="modal-id" style="display: none">
                <div class="form-group" style="margin-bottom: 40px;display: flex;align-items: center;">
                    <label class="col-sm-2 control-label">通知标题:</label>
                    <input id="modal-name" style="width: 200px" type="text" class="form-control" placeholder="请输入通知标题">
                </div>
                <div id="editor" style="min-height: 300px"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id="cancelBtn">取消</button>
                <button type="button" id="saveBtn" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/my.js"></script>
<script src="../js/vue2.6.11/vue.min.js"></script>
<script src="../js/vue2.6.11/axios.js"></script>
<script src="../js/quill.js"></script>
<script src="../js/element/index.js"></script>

<!--文件上传js-->
<script>
    function msg(type, msg) {
        Vue.prototype.$message({
            type: type, // success（成功）、warning（警告）, error(错误)
            message: msg,
            duration: 2000,
            offset: 100,
            center: true,
        })
    }

    let quill = new Quill('#editor', {
        theme: 'snow',
        modules: {
            toolbar: {
                container: [
                    [{'header': [1, 2, 3, 4, 5, 6, false]}],        // 标题字体
                    [{'font': []}],                                 // 字体
                    ['bold', 'italic', 'underline', 'strike'],        // 切换按钮
                    [{'align': []}],                                // 对齐方式
                    ['blockquote', 'code-block'],                     // 文本块/代码块
                    [{'header': 1}, {'header': 2}],               // 用户自定义按钮值
                    [{'list': 'ordered'}, {'list': 'bullet'}],     // 有序/无序列表
                    [{'indent': '-1'}, {'indent': '+1'}],          // 减少缩进/缩进
                    [{'color': []}, {'background': []}],          // 主题默认下拉，使用主题提供的值
                    ['clean'],                                        // 清除格式
                    ['image', 'link', 'video']                        // 图片 / 链接 / 视频
                ]
            }

        }
    });

    let wrapper = new Vue({
        el: '#wrapper',
        data: {
            user: {},
            name: '',
            entity: {},
            authority: [],
            permission: [],
            tableData: [],
            pageInfo: {},
            preActive: true,
            nextActive: true,
            modalData: {}
        },
        created: function () {
            this.loadTable(1);
            this.user = JSON.parse(localStorage.getItem('user'));
            axios.get("/permission/1000001").then(res => {
                if (res.data.code === '0') {
                    this.permission = res.data.data;
                } else {
                    msg('error', res.data.msg);
                }
            });

            axios.get("/authority").then(res => {
                if (res.data.code === '0') {
                    this.authority = res.data.data;
                } else {
                    msg('error', res.data.msg);
                }
            });
        },
        methods: {
            loadTable(pageNum) {
                let name = this.name === '' ? "all" : this.name;
                axios.get("/advertiserInfo/page/" + name + "?pageNum=" + pageNum).then(res => {
                    if (res.data.code === '0') {
                        this.tableData = res.data.data.list;
                        this.pageInfo = res.data.data;
                        this.preActive = !(this.pageInfo.hasPreviousPage);
                        this.nextActive = !(this.pageInfo.hasNextPage);
                    } else {
                        msg('error', res.data.msg);
                    }
                });
            },
            add() {
                if (this.permission.indexOf(1) === -1) {
                    msg('warning', '你没有权限操作');
                    return;
                }
                this.entity = {};
                $('#modal-id').val('');
                $('#modal-name').val('');
                quill.root.innerHTML = '';
                $('#myModal').modal('show');
            },
            edit(data) {
                if (this.permission.indexOf(3) === -1) {
                    msg('warning', '你没有权限操作');
                    return;
                }
                $('#modal-id').val(data.id);
                $('#modal-name').val(data.name);
                quill.root.innerHTML = data.content;
                $('#myModal').modal('show');
            },
            del(id) {
                if (this.permission.indexOf(2) === -1) {
                    msg('warning', '你没有权限操作');
                    return;
                }

                this.$confirm('确认删除？', '系统提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'btn-custom-cancel',
                    type: 'warning'
                }).then(function(){
                    axios.delete('/advertiserInfo/' + id).then(res => {
                        if (res.data.code === '0') {
                            msg('success', '删除成功');
                            wrapper.loadTable(1);
                        } else {
                            msg('error', res.data.msg);
                        }
                    });
                }).catch(function() {
                    console.log("取消成功！");
                });
            },
            logout() {
                logout();
            }
        }
    });

    $('#saveBtn').click(function () {
        let entity = wrapper.$data.entity;
        entity.content = quill.root.innerHTML;
        entity.name = $('#modal-name').val();
        if (!$('#modal-id').val()) {
            axios.post(
                "/advertiserInfo", entity
            ).then(res => {
                if (res.data.code === '0') {
                    msg('success', '添加成功');
                    wrapper.loadTable(1);
                } else {
                    msg('error', res.data.msg);
                }
            })
        } else {
            entity.id = $('#modal-id').val();
            axios.put(
                "/advertiserInfo", entity
            ).then(res => {
                if (res.data.code === '0') {
                    msg('success', '更新成功');
                    wrapper.loadTable(1);
                } else {
                    msg('error', res.data.msg);
                }
            })
        }
        $('iframe.ql-video').attr('src', '');  // 清空视频iframe的src属性，可关闭视频
        $('#myModal').modal('hide');
    });

    $('#cancelBtn').click(function () {
        $('#myModal').modal('hide');
        $('iframe.ql-video').attr('src', '')  // 清空视频iframe的src属性，可关闭视频
    });

    $('#closeBtn').click(function () {
        $('#myModal').modal('hide');
        $('iframe.ql-video').attr('src', '')  // 清空视频iframe的src属性，可关闭视频
    })
</script>
</body>
</html>
